<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" errorPage="error.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
h1{
    color:red; /* 颜色 */
    text-align: center; /* 文本在块元素中居中对齐 */
}
.kuang{
/*     width: 700px; /* 设置块元素的宽度 */ */
    margin: auto; /* 有宽度的块元素在所属的容器中居中布局 */
}
.content{
    border: 2px solid red; /* 边框：宽度、样式、颜色 */
    display: flex; /* 弹性布局，默认主轴的方向row是水平的 */
    gap: 10px; /* 该容器内各个子项间的间距 */
    padding: 10px; /* 该容器内的项目到容器边框的距离 */
}
.column{
    border: 1px solid gray;
    padding: 10px; /* 该容器内的项目到容器边框的距离 */
    white-space: nowrap; /* 每行的内容不换行 */
    flex-grow: 1; /* 分配所在容器内多余的空间，默认是0，即不占用 */
}
a{
    text-decoration:none;
    color: gray;
}
a:hover { /* 鼠标悬停到链接上时的样式 */
    color:red;
    text-decoration: underline;
}
</style>
<title>分页显示成语</title>
</head>
<body>
<h1>分页显示成语</h1>
<div class='kuang'><%
Class.forName("com.mysql.cj.jdbc.Driver");
String stringPage=request.getParameter("page"); //字符串表示的页码
if(stringPage==null)stringPage="1"; //如果没有给页码，默认就看第一页
int currentPage=Integer.parseInt(stringPage); //整数表示的当前页码
int n=20; //当前超链接左边和右边的超链接个数，每边5个
int columnCount=8;//一个页面上显示成语的列数
int cyCountPerColumn=15; //每列包含成语的个数
int begin, over; //第一个及最后一个超链接的页码
int maxPage; //最大页码值
int pageSize; //页面大小，就是一个页面显示成语的个数
try(Connection cn=DriverManager.getConnection("jdbc:mysql://localhost:3306/db?allowMultiQueries=true", "root", "12qwas");
    Statement st=cn.createStatement();
    ResultSet rs=st.executeQuery("select count(*) from chengyu");){ //获取成语的总个数
    rs.next();
    int total=rs.getInt(1);//总的成语个数
    pageSize=columnCount*cyCountPerColumn;//页面大小，就是一个页面显示成语的个数
    maxPage=total/pageSize+(total%pageSize==0?0:1); //最大页码值
    if(currentPage<1)currentPage=1;
    else if(currentPage>maxPage)currentPage=maxPage; //对当前显示的页码进行合理性检测
    begin=currentPage-n; //第一个超链接的页码
    over=currentPage+n; //最后一个超链接的页码
    if(begin<1){ //调整页码
        over-=begin-1;
        if(over>maxPage)over=maxPage;
        begin=1;
    }else if(over>maxPage){
        begin-=over-maxPage;
        if(begin<1)begin=1;
        over=maxPage;
    }
}
%>
<div class='nav'>
<%
if(begin>1){
    out.println("\t\t<a href='?page=1'>首页</a> ");
}
for(int i=begin;i<=over;i++){
    if(i==currentPage){
        out.println("\t\t<b>"+currentPage+"</b>");
    }else{
        out.println("\t\t<a href='?page="+i+"'>"+i+"</a>");
    }
}
if(over<maxPage){
    out.print("\t\t<a href='?page="+maxPage+"'>尾页</a> ");
}
%>
    </div>
    <div class='content'>
<%
try(Connection cn=DriverManager.getConnection("jdbc:mysql://localhost:3306/db?allowMultiQueries=true", "root", "12qwas");
    PreparedStatement ps=cn.prepareStatement("select cy from chengyu limit ?,?")){
    ps.setInt(1, (currentPage-1)*pageSize);
    ps.setInt(2, pageSize);
    try(ResultSet rs=ps.executeQuery()){
        for(int i=0;i<columnCount;i++){ //循环显示每一列
            out.println("\t\t<div class='column'>");
            for(int j=0;j<cyCountPerColumn;j++){ //循环显示每一个成语
                if(rs.next()){ //有记录
                    out.println("\t\t\t<p>"+rs.getString(1)+"</p>");
                }else{
                    out.println("\t\t\t<p>　</p>");
                }
            }
            out.println("\t\t</div>");
        }
    }
}

%>

<!--     </div> -->
<!--     <div class='content'> -->
<!--         <div class='column'> -->
<!--             <p>一丁不识</p> -->
<!-- 			<p>一不做二不休</p> -->
<!-- 			<p>一不压众百不随一</p> -->
<!-- 			<p>一不扭众</p> -->
<!-- 			<p>一世之雄</p> -->
<!-- 			<p>一世龙门</p> -->
<!-- 			<p>一丘一壑</p> -->
<!-- 			<p>一丘之貉</p> -->
<!-- 			<p>一丝一毫</p> -->
<!-- 			<p>一丝不挂</p> -->
<!-- 		</div> -->
<!-- 		<div class='column'> -->
<!-- 			<p>一丝不紊</p> -->
<!-- 			<p>一丝不苟</p> -->
<!-- 			<p>一丝两气</p> -->
<!-- 			<p>一丝半粟</p> -->
<!-- 			<p>一个半个</p> -->
<!-- 			<p>一个巴掌拍不响</p> -->
<!-- 			<p>一个萝卜一个坑</p> -->
<!-- 			<p>一串骊珠</p> -->
<!-- 			<p>一举一动</p> -->
<!-- 			<p>一举万里</p> -->
<!-- 		</div> -->
<!-- 		<div class='column'> -->
<!-- 			<p>一举三反</p> -->
<!-- 			<p>一举两全</p> -->
<!-- 			<p>一举两得</p> -->
<!-- 			<p>一举千里</p> -->
<!-- 			<p>一举成名</p> -->
<!-- 			<p>一举手之劳</p> -->
<!-- 			<p>一之为甚</p> -->
<!-- 			<p>一之已甚</p> -->
<!-- 			<p>一之谓甚</p> -->
<!-- 			<p>一乱涂地</p> -->
<!-- 		</div> -->
<!-- 		<div class='column'> -->
<!-- 			<p>一了百了</p> -->
<!-- 			<p>一了百当</p> -->
<!-- 			<p>一事不知</p> -->
<!-- 			<p>一事无成</p> -->
<!-- 			<p>一五一十</p> -->
<!-- 			<p>一些半些</p> -->
<!-- 			<p>一人之下万人之上</p> -->
<!-- 			<p>一人之交</p> -->
<!-- 			<p>一人传虚万人传实</p> -->
<!-- 			<p>一人向隅满坐不乐</p> -->
<!-- 		</div> -->
<!-- 	</div> -->

</body>
</html>

